<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
    String static_path = path + "/static/alpha";
    String x_admin_path = path + "/static/X-admin-2.3";
%>

<%--<head>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
<script type="text/javascript" src="<%=x_admin_path%>/jquery-3.2.1.min.js"></script>
<link rel="stylesheet" href="<%=x_admin_path%>/css/font.css">
<link rel="stylesheet" href="<%=x_admin_path%>/css/xadmin.css">
<script type="text/javascript" src="<%=x_admin_path%>/lib/layui/layui.js" charset="utf-8"></script>
<script type="text/javascript" src="<%=x_admin_path%>/js/xadmin.js"></script>
</head>--%>

<div class="card card-primary card-outline">
    <div class="card-header">
        <h3 class="card-title">设置</h3>

    </div>
    <!-- /.card-header -->
    <div class="card-body p-0">
        <div class="mailbox-controls">
            <!-- Check all button -->
            <button type="button" class="btn btn-default btn-sm checkbox-toggle" ><i class="fa fa-square-o"></i>
            </button>
            <div class="btn-group">
                <button type="button" class="btn btn-default btn-sm" id="deleteChecked"><i class="fa fa-trash-o"></i></button>
                <%--<button type="button" class="btn btn-default btn-sm"><i class="fa fa-reply"></i></button>
                <button type="button" class="btn btn-default btn-sm"><i class="fa fa-share"></i></button>--%>
            </div>
            <!-- /.btn-group -->
            <button type="button" onclick="location.reload();" class="btn btn-default btn-sm"><i class="fa fa-refresh"></i></button>
            <!-- /.float-right -->
            <%--<button class="layui-btn" data-method="up_depart" onclick="insert()" style="width:110px;height: 32px;"><i class="layui-icon"></i>添加</button>
            --%>
            <button id="insert" style="width:110px;height: 32px;"> 添加</button>

        </div>
        <div class="table-responsive mailbox-messages">
            <table class="table table-hover table-striped">
                <tbody>
                <tr>
                    <td></td>
                    <td class="mailbox-name" ><b>ID</b></td>
                    <td class="mailbox-name" ><b>菜单名</b></td>
                    <td class="mailbox-attachment"><b>排序</b></td>
                    <td class="mailbox-date"><b>禁用</b></td>
                </tr>
                <c:forEach items="${requestScope.BigTypeSettings}" var="big">
                <tr>
                    <td><input type="checkbox" id="ck" value="${big.id} "></td>
                    <%--<td class="mailbox-star"><a href="#"><i class="fa fa-star text-warning"></i></a></td>--%>
                    <td class="mailbox-name" >${big.id} </td>
                    <td class="mailbox-name" ><b id="updataName">${big.name} </b></td>
                    <%--<td class="mailbox-subject"><a>url: ${big.url}</a></td>--%>
                    <td class="mailbox-attachment"><a id="updataSort">${big.sort}</a></td>
                    <td class="mailbox-date"  ><button class="disable">禁用</button></td>
                </tr>
                </c:forEach>
                </tbody>
            </table>
            <!-- /.table -->
        </div>
        <!-- /.mail-box-messages -->
    </div>
    <!-- /.card-body -->
    <div class="card-footer p-0">
        <div class="mailbox-controls">
            <div></div>
        </div>
    </div>
</div>

<script>
    $("b[id=updataName]").click(updataName)
    $("a[id=updataSort]").click(updataSort)

    $("#insert").click(function(){
        /*var name=prompt("请输入菜单名");
        alert(name);*/
    })

    //更新一级菜单名
    function updataName(){
        var name = $(this).html();
        var tx = $("<input type='text'>");
        tx.css("width",100);
        tx.val(name);
        $(this).parent().html(tx);

        tx.blur(function(){
            var newName = $(this).val();//文本框中新输入的数据
            var thx = tx.parent();
            var Id = thx.prev().html();//检测类型ID
            $.ajax({
                url : "<%=path%>/manage/memu_settings/update_bigType/updateName",
                type : "get",
                async:false,
                data : {
                    id : Id,
                    name : newName,
                },
                success : function(mes) {
                }
            });
            var nx = $("<b></b>");
            nx.html(newName);
            thx.html(nx);
            nx.click(updataName);})//重新添加
    };
    //更新一级菜单排序
    function updataSort(){
        var name = $(this).html();
        var tx = $("<input type='text'>");
        tx.css("width",70);
        tx.val(name);
        $(this).parent().html(tx);
        tx.blur(function(){
            var newSort = $(this).val();//文本框中新输入的数据
            var thx = tx.parent();
            var Id = thx.prev().prev().html();
            var zz =/^\+?[1-9][0-9]*$/;
            var flag = zz.test(newSort);
            if(zz.test(newSort)&&newSort!=""){
                $.ajax({
                    url : "<%=path%>/manage/memu_settings/update_bigType/updataBigTypeSort",
                    type : "get",
                    async:false,
                    data : {
                        id : Id,
                        sort : newSort,
                    },
                    success : function(mes) {
                    }
                });
                var nx = $("<a></a>");
                nx.html(newSort);
                thx.html(nx);
                nx.click(updataSort);//重新添加
            }
            else{
                alert("请输入非零的正整数")
                var nx = $("<a></a>");
                nx.html(name);
                thx.html(nx);
                nx.click(updataSort);//重新添加
            }
        })
    }

    //批量删除
    $("#deleteChecked").click(function(){
        //获得选中的复选框对应的carid
        var ckx = $("input[id=ck]:checked");
        //ckx是集合  中间存放的是选中的复选框
        var ids ="";
        var idsDemo="";
        ckx.each(function(){
            //$(this)//表示的是集合中间的一个元素  $(this)是一个选中的复选框
            /*var t = $(this).parent().next().html();*/
            var t = $(this).val();
            ids=ids+","+t;
        });
        var mymessage=confirm("确定禁用"+ ids+"吗？");
        if(mymessage==true) {
            $.ajax({
                url:"<%=path%>/manage/memu_settings/update_bigType/deleteChecked",
                type:"get",
                data:{
                    ids : ids,
                },
                async:false,
                success:function(mes){
                }
            });
            ckx.each(function(){
                $(this).parent().parent().parent().remove();
            });
        }
        if(mymessage==false){
            alert("已取消")
        }
    })

    //单一删除
    $(".disable").click(function(){
            var id=$(this).parent().prev().prev().prev().html();
            var name=$(this).parent().prev().prev().children().html();
            var mymessage=confirm("确定禁用"+"“"+name+"“"+"吗？");
            if(mymessage==true) {
                $.ajax({
                    url:"<%=path%>/manage/memu_settings/update_bigType/deleteSingle",
                    type:"get",
                    data:{
                        id : id,
                    },
                    async:false,
                    success:function(mes){
                    }
                });
                $(this).parent().parent().remove();
            }
            if(mymessage==false){
                alert("已取消")
            }
        })
</script>

<script>
    $(function () {
        //Enable iCheck plugin for checkboxes
        //iCheck for checkbox and radio inputs
        $('.mailbox-messages input[type="checkbox"]').iCheck({
            checkboxClass: 'icheckbox_flat-blue',
            radioClass   : 'iradio_flat-blue'
        })

        //Enable check and uncheck all functionality
        $('.checkbox-toggle').click(function () {
            var clicks = $(this).data('clicks')
            if (clicks) {
                //Uncheck all checkboxes
                $('.mailbox-messages input[type=\'checkbox\']').iCheck('uncheck')
                $('.fa', this).removeClass('fa-check-square-o').addClass('fa-square-o')
            } else {
                //Check all checkboxes
                $('.mailbox-messages input[type=\'checkbox\']').iCheck('check')
                $('.fa', this).removeClass('fa-square-o').addClass('fa-check-square-o')
            }
            $(this).data('clicks', !clicks)
        })

        //Handle starring for glyphicon and font awesome
        $('.mailbox-star').click(function (e) {
            e.preventDefault()
            //detect type
            var $this = $(this).find('a > i')
            var glyph = $this.hasClass('glyphicon')
            var fa    = $this.hasClass('fa')

            //Switch states
            if (glyph) {
                $this.toggleClass('glyphicon-star')
                $this.toggleClass('glyphicon-star-empty')
            }

            if (fa) {
                $this.toggleClass('fa-star')
                $this.toggleClass('fa-star-o')
            }
        })
    })
</script>

